<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div :class="{str:isShow,'as-ds':isShow}"> </div>
        <div :class="['abc','dsas', str=='a1'?'is':'no']"></div>
        <div :style="{ height:'20px',backgroundColor:bgColor }"></div>
        <div :style="{ height:'20px',backgroundColor:name=='di'?'pink':'blue' }"> </div>
        <input type="text" v-model="str">
        <h3>{{ str }}</h3>
        <textarea v-model="str2"></textarea>
        <h3>{{str2}}</h3>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                str:'',
                isShow:true,
                bgColor:'red',
                name:'di',
                str2:''
            },
        //    watch:{
        //        str2:function(newStr2,oldStr2){
        //            this.answer = 'Waiting for you to stop typing...'
        //            this.debouncedGetAnswer()
        //        }
        //    },
        //    created: function () {
    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
    // 请参考：https://lodash.com/docs#debounce
//     this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
//   },
//   methods: {
//     getAnswer: function () {
//       if (this.question.indexOf('?') === -1) {
//         this.answer = 'Questions usually contain a question mark. ;-)'
//         return
//       }
//       this.answer = 'Thinking...'
//       var vm = this
//       axios.get('https://yesno.wtf/api')
//         .then(function (response) {
//           vm.answer = _.capitalize(response.data.answer)
//         })
//         .catch(function (error) {
//           vm.answer = 'Error! Could not reach the API. ' + error
//         })
//     }
//   }
})
    </script>
</body>
</html>